<template>
	<!-- 登录 -->
	<div id="app">
		<div class="background">
			<img :src="imgSrc" width="100%" height="100%" alt="" />
		</div>
		<div class="front">
			<router-view></router-view>
			<router-link type="info" to="/register">首页</router-link>
			<el-card class="box-card-login">
				<div class="flexx">
					<div class="flexx-from">
						<h2>软特来福账号密码登录</h2>
						<div class="flexx-from1">
							<el-form ref="form" :model="form" label-width="80px">
								<el-form-item label="用户账号:">
									<el-col :span="20">
										<el-input type="text" v-model="form.name" prefix-icon="el-icon-user" placeholder="输入邮箱号/手机号"></el-input>
									</el-col>
								</el-form-item>
								<el-form-item label="用户密码:">
									<el-col :span="20">
										<el-input type="password" v-model="form.password" prefix-icon="el-icon-lock" placeholder="输入密码"></el-input>
									</el-col>
								</el-form-item>
								<el-form-item label="验证码:">
									<el-col :span="20">
										<el-input type="text" v-model="form.yzm" placeholder="输入验证码"></el-input>
										<img :src="imgSrcyzm" width="90px" height="35px" alt="" />
									</el-col>
								</el-form-item>
								<el-form-item>
									<template slot-scope="scope">
										<el-button type="primary" @click="onSubmit">立即登录</el-button>
										<el-button size="mini" round @click="onForget">忘记密码</el-button>
									</template>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</div>
				<div class="link">
					<router-link type="primary" to="/register">立即注册</router-link>还没有账号？
				</div>
			</el-card>

			<div>
				<el-dialog title="忘记密码" :visible.sync="updatePwdVisible" width="80%" :before-close="handleClose">
					<el-form ref="form" :model="form" label-width="80px">
						<el-form-item label="电话号码:">
							<el-input></el-input>
						</el-form-item>
						<el-form-item label="输入验证码:">
							<el-input></el-input>
							<el-button type="primary" @click="onSend">发送验证码</el-button>
						</el-form-item>
						<el-form-item label="输入新密码:">
							<el-input></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onUpdateCommit">修改密码</el-button>
							<el-button @click="onupdatecancel">取消</el-button>
						</el-form-item>
					</el-form>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		methods: {
			onSubmit() {
				this.$axios.post("http://localhost:8088/springboot/getuserbyid/6", {
					username: this.form.username,
					password: this.form.password
				}).then(function(res) {
					console.log(res.data.data.token)
					localStorage.setItem('token', res.data.data.token)
				}).catch(function(err) {})
			},
			onForget() {
				console.log('open')
				this.updatePwdVisible = true
			},
			onSend() {
				console.log('send')
			},
			onUpdateCommit() {

			},
			onupdatecancel() {
				console.log('cancel')
				this.updatePwdVisible = false
			}
		},
		data() {
			return {
				form: {
					name: '',
					password: '',
					type: [],
					updatePwdVisible: false
				},

				imgSrc: "https://img-blog.csdnimg.cn/20210315195750345.gif",
				imgSrcyzm: "https://img-blog.csdnimg.cn/20210315195750345.gif"
			}
		},
		beforeRouteUpdate(to, from, next) {
			// 做一些想要做的处理...
			// this.errCode = to.params.code
			// this.info = formatErrorMsg(this.errCode)
			next() // 一定要有next
		}
	}
</script>

<style>
	.background {
		width: 100%;
		height: 100%;
		/**宽高100%是为了图片铺满屏幕 */
		z-index: -1;
		position: absolute;
	}

	.front {
		z-index: 1;
		position: absolute;
	}

	.flexx {
		display: flex;
		flex-direction: row;
		margin-top: 50%;
		margin-left: 50%;

	}

	.flexx-from {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.flexx-from1 {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.box-card-login {
		margin: auto;
		width: 318px;
		height: 435px;
		margin-top: 25%;
		margin-left: 35%;
		padding: 6px;
	}

	.link {
		display: flex;
		flex-direction: row-reverse;
	}
</style>
